const getProductSortUrl = "https://ali.ikenway.net:18443/api/productSort/findAll";
const createProductSortUrl = "https://ali.ikenway.net:18443/api/productSort/create";
const updateProductSortUrl = "https://ali.ikenway.net:18443/api/productSort/update";
const deleteProductSortUrl = "https://ali.ikenway.net:18443/api/productSort/delete";

let maxOrder = null;
let productSorts = null;
let token = sessionStorage.getItem("token");

function initProductSorts() {

    fetch(getProductSortUrl, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        }
    }).then(res => {
        res.json().then(json => {
            if (json.code === 200) {
                productSorts = json.data;

                let tableInnerHtml = "";

                maxOrder = 0;
                for (let i = 0; i < productSorts.length; i++) {
                    let enable = productSorts[i].enable ? "checked" : "";
                    let displayOrder;
                    if (productSorts[i].displayOrder == null) {
                        displayOrder = "";
                    } else {
                        displayOrder = productSorts[i].displayOrder;
                        maxOrder = maxOrder >= displayOrder ? maxOrder : displayOrder;
                    }

                    tableInnerHtml += `
                        <tr class="table-row-` + i + `">
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input table-select" type="checkbox" value="` + i + `">
                                </div>
                            </td>
                            <th scope="row">` + productSorts[i].sortId + `</th>
                            <td>
                                <label class="w-50">
                                    <input type="text" class="form-control" value="` + productSorts[i].sortName + `">
                                </label>
                            </td>
                            <td>
                                <label class="w-50">
                                    <input type="text" class="form-control" value="` + displayOrder + `">
                                </label>
                            </td>
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" ` + enable + ` onchange="genDisplayOrder(` + i + `)">
                                </div>
                            </td>
                            <td class="d-flex flex-row align-items-baseline mb-0" style="width: 150px">
                                <button type="button" class="btn btn-primary me-3" onclick="sortUpdate(` + i + `)">修改</button>
                                <button type="button" class="btn btn-danger" onclick="sortDelete(` + i + `)">删除</button>
                            </td>
                        </tr>
                    `;
                }

                document.getElementById("table-body").innerHTML = tableInnerHtml;
            } else if (json.code === 400) {
                alertMsg(json.msg);

                window.location.href = loginPageUrl;
            } else {
                alertMsg(json.msg);
            }
        })
    })
}

function sortUpdate(index) {
    let col = document.querySelectorAll(".table-row-" + index + " .form-control");
    let checkbox = document.querySelectorAll(".table-row-" + index + " .form-check-input");

    let data = {
        "sortId": productSorts[index].sortId,
        "sortName": col[0].value,
        "displayOrder": col[1].value == "" ? null : col[1].value,
        "enable": checkbox[1].checked
    }

    fetch(updateProductSortUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        },
        body: JSON.stringify(data)
    }).then(res => {
        res.json().then(json => {
            alertMsg(json.msg)
        })
    });
}

function sortDelete(index = null) {
    let data = null;
    if (index != null) {
        data = {
            "sortIds": [productSorts[index].sortId]
        }
    } else {
        let formCheck = document.querySelectorAll(".table-select");

        let checked = [];

        for (let i = 0; i < formCheck.length; i++) {
            if (formCheck[i].checked) {
                console.log(formCheck[i])
                checked.push(productSorts[formCheck[i].value].sortId)
            }
        }

        data = {
            "sortIds": checked
        }
    }

    fetch(deleteProductSortUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        },
        body: JSON.stringify(data)
    }).then(res => {
        res.json().then(json => {
            alertMsg(json.msg)
        })
    })
}

function sortCreate() {
    let enable = document.getElementById("createCheckbox").checked;
    let data = {
        "sortName": document.getElementById("input1").value,
        "displayOrder": document.getElementById("input2").value,
        "enable": enable
    }

    fetch(createProductSortUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        },
        body: JSON.stringify(data)
    }).then(res => {
        res.json().then(json => {
            alertMsg(json.msg)
        })
    })
}

function productOpera() {
    switch (document.getElementById("selector").selectedIndex) {
        case 0:
            sortDelete();
            break;
        case 1:
            break;
    }
}

function genDisplayOrder(index = null) {
    if (index != null) {
        let col = document.querySelectorAll(".table-row-" + index + " .form-control");
        col[1].value = ++maxOrder;
    } else {
        document.getElementById("input2").value = ++maxOrder;
    }
}
